<template>
<div class="icons">
  <swiper :options="swiperOption">
    <swiper-slide v-for="(page, index) of pages" :key="index">
    <div class="icon" v-for="item of page" :key="item.id">
      <span class="iconfont" v-html="item.icon" :style="{background:item.color}"></span>
      <div class="icon-tit">{{item.tit}}</div>
    </div>
    </swiper-slide>
  </swiper>
</div>
</template>

<script>
export default {
  name: 'HomeIcons',
  props: {
    list: Array,
  },
  data() {
    return {
      swiperOption: {
        autoplay: false,
      },
    };
  },
  computed: {
    pages() {
      const pages = [];
      this.list.forEach((item, index) => {
        const page = Math.floor(index / 8);
        if (!pages[page]) {
          pages[page] = [];
        }
        pages[page].push(item);
      });
      return pages;
    },
  },
};
</script>

<style lang="stylus" scoped>
  @import '~style/varibles.styl'
  @import '~style/mixins.styl'
  .icons >>> .swiper-container
    height: 0
    padding-bottom: 50%
  .icons
    overflow : hidden
    height: 0
    padding-bottom: 50%
    margin: 1vw 0 2vw
    // background : yellow
    .icon
      position : relative
      float: left
      width: 25%
      padding-bottom: 25%
      text-align : center
      // background : red
      span
        position: absolute
        left: 50%
        top: 50%
        transform: translate(-50%,-50%)
        color: #fff
        border-radius: 70%
        background: green
        padding: 2.8vw
        font-size: 10vw
      .icon-tit
        position: absolute
        bottom: 0
        left: 10%
        width: 80%
        font-size: 4vw
        color: $darkTextColor
        text-align: center
        ellipsis()
</style>
